{#:extends file="Public_layout.html"}
{#:block name="main"}

<!-- 内容 -->
<div class="c1" style="display: block;">
    <!-- 弹窗显示 -->
    <div id="detail" class="cont detail" style="display:none;max-height: 820px">
        <!-- 关闭按钮 -->
        <a href="javascript:popup_close();" class="close"><img src="../../static/admin/images/x.png" width="20px"></a>
        <!-- 标题 -->
        <h2 id="cate_title">新增商品分类</h2>
        <form class="list" action="#" method="get">
            <table class="tab" style="margin-top: 10px">
                <tbody>
                    <tr>
                        <th>分类名称*</th>
                        <td><input id="cate_name" type="text" value=""></td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <th>分类排序</th>
                        <td><input id="cate_sort" type="text" value="" maxlength="5"></td>
                        <td>必须是数字，0为顶级</td>
                    </tr>
                    <tr>
                        <th style="height: 40px">分类图片</th>
                        <td class="upd">
                            <img class="showImg" id="cateimg" src="{#:config('DEFAULT_EMPTY_PIC')}" width="50">
                            <input type="file" id="upload_cateimg" />
                            <button type="button" id="delete_cateimg">删除</button>
                        </td>
                        <td>图片尺寸: 200 x 200</td>
                    </tr>
                </tbody>
            </table>
            <input id="cate_id" type="hidden" value="0">
            <input id="submit" type="button" value="保存" class="tab_btn">
        </form>
    </div>

    <!-- 搜索查询 -->
    <form class="form-inline definewidth m20" action="" method="get">
        分类名称：<input id="search_name" type="text" class="abc input-default" placeholder="支持模糊查询" value="" />
        &nbsp;&nbsp;
        <button id="search" type="button" class="btn-flat primary">&emsp;搜&nbsp;索&emsp;</button>
    </form>
    <!-- 数据列表 -->
    <table class="table table-bordered table-hover definewidth m10" >
        <caption>
            <span>商品分类列表&nbsp;|&nbsp;</span><span style="font-size: 15px; color: #666 ">记录总数:&nbsp;</span><span style="font-size: 16px;" id="count">0</span>
            <span class="btn-flat white" onclick="insert()" style="float: right;margin-top: 20px; font-size: 14px">+ 新增商品分类</span>
        </caption>
        <thead>
            <tr>
                <th>分类图片</th>
                <th>分类名称</th>
                <th>分类排序</th>
                <th style="width:200px">操作</th>
            </tr>
        </thead>
        <tbody id="show_list">
            <!-- 列表内容 -->
        </tbody>
    </table>
    <div id="list_page" style="text-align: right;">
        <!-- 分页 -->
    </div>
</div>

<!-- JS -->
<script type="text/javascript" src="../../static/admin/js/common.js"></script>
<script type="text/javascript">
var default_pic = "{#:config('DEFAULT_EMPTY_PIC')}";
$(function(){

    show_list(1);

    // 删除图片
    $("#delete_cateimg").click(function(){
        $("#cateimg").attr('src', default_pic);
    });

    // 文件上传
    $('#upload_cateimg').uploadifive({
        'auto' : true,
        'buttonClass' : false,
        'buttonText' : '上传',
        'fileSizeLimit' : '2MB',    //上传附件大小,0不限制,5120B/512KB/2MB/1GB
        'fileType' : false,
        'method' : 'post',
        'multi' : true, // 开启,多选文件
        'queueID' : false,
        'uploadScript' : '{#:url("entry/upload")}',
        'onError' : function(file, fileType, data) {
            var errorMsg;
            switch(file) {
                case '404_FILE_NOT_FOUND':
                    errorMsg = '404错误';
                    break;
                case '403_FORBIDDEN':
                    errorMsg = '403禁止';
                    break;
                case 'FORBIDDEN_FILE_TYPE':
                    errorMsg = '禁止的文件类型';
                    break;
                case 'FILE_SIZE_LIMIT_EXCEEDED':
                    errorMsg = '文件过大';
                    break;
                default:
                    errorMsg = '未知错误';
                    break;
            }
            alert(errorMsg);
        },
        'onUploadComplete' : function(file, data) {
            // console.log(data);return false;
            var json = eval('(' + data + ')');
            if(json.status == 1) {
                $("#cateimg").attr('src', json.file);
                // $('.win-pop').removeClass('active');
            } else {
                alert(json.info, 0);
            }
        }
    });


    // 模糊查询
    $("#search").click(function(){
        show_list(1);
    });

    // 新增编辑
    $("#submit").click(function(){
        submit();
    });

    // 查看记录
    $('body').on('click','.data_edit',function(){
        var cate_id = $(this).parents('tr').data('id');
        // console.log(cate_id);return false;
        if((typeof(cate_id) != 'undefined') && !isNaN(cate_id)) {
            $.post("{#:url('index/getCateById')}", {cate_id:cate_id}, function(response){
                // console.log(response);return false;
                if(response.status == 1) {
                    // 赋值
                    set_data(response.data);
                    // 打开窗口
                    popup_open();
                } else {
                    msg(response.info, 0);
                }
            }, 'json');
        } else {
            msg('修改时ID错误', 0);
        }
    });

    // 删除记录
    $('body').on('click','.data_delete',function(){
        var tr = $(this).parents('tr');
        var cate_id = tr.data('id');
        var name = $(this).parents('td').siblings('.name').text();
        if((name == '') || (typeof(name) == 'undefined')) {
            show_name = '此条记录';
        } else {
            show_name = '(' + name +')';
        }
        // console.log(cate_id);return false;
        if(cate_id == '') {
            msg('修改时错误', 0);
        }
        //询问框
        layer.confirm('是否确认删除' + show_name + '，删除后不可恢复？', {
            title: '删除确认',
            btn: ['确定','取消'] //按钮
        }, function(){
            $.post("{#:url('index/deleteCate')}", {cate_id:cate_id}, function(response){
                // console.log(response);return false;
                if(response.status == 1) {
                    // show_list(1);
                    tr.remove();
                    var count = parseInt($("#count").html()) - 1;
                    var total = (count < 0) ? 0 : count;
                    $("#count").html(total);
                }
                msg(response.info, response.status);
                layer.closeAll();
            }, 'json');
        }, function(){
            // 取消
        });
    });

});

/**
 * 获取列表数据
 * @param  {[type]}   curr [description]
 * @return {[type]}        [description]
 */
function show_list(curr)
{
    var search_name = $.trim($("#search_name").val());
    $.post("{#:url('index/cateList')}", {page: curr || 1, search_name:search_name}, function(response){
        // console.log(response);return false;
        if(response.status == 1) {
            // 显示数量
            $("#count").html(response.count);
            // 显示列表
            set_list(response.data);
            // 显示分页
            show_page('list_page', response.pages, curr);
        } else {
            msg(response.info, 0);
        }
    }, 'json');
}

/**
 * 循环赋值list
 * @param  {[type]}   data [description]
 */
function set_list(data)
{
    if(data != '') {
        var html = '';
        if(data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                html += get_list(data[i]);
            }
        }
    } else {
        var html = '<tr><td colspan="20">暂无数据</td></tr>';
    }
    $("#show_list").html(html);
}

/**
 * JSON转换成HTML
 */
function get_list(n)
{
    var h = '';
    if(!$.isEmptyObject(n)) {
        h += '<tr data-id="' + n.cate_id + '" >';
        h += '<td><img class="showImg" style="width:50px; height:50px" src="' + n.show_image + '"></td>';
        h += '<td class="name">' + n.cate_name + '</td>';
        h += '<td>' + n.cate_sort + '</td>';
        h += '<td><span class="data_edit hand">编辑</span> | <span class="data_delete hand">删除</span></td>';
        h += '</tr>';
    }
    return h;
}
/**
 * 显示分页
 */
function show_page(cont, pages, curr)
{
    //显示分页
    laypage({
        cont: cont, //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
        curr: curr || 1, //当前页
        pages: pages, //通过后台拿到的总页数
        skin: 'yahei', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
        groups: 6, //连续显示分页数
        jump: function(obj, first){ //触发分页后的回调
            if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                show_list(obj.curr);
            }
        }
    });
}

/**
 * 清空数据
 */
function empty_data()
{
    $("#cate_title").html('新增商品分类');
    $("#cate_id").val(0);
    $("#cate_name").val('');
    $("#cate_sort").val(0);
    $("#cateimg").attr("src", default_pic);
}
/**
 * 记录赋值
 */
function set_data(data)
{
    $("#cate_title").html('编辑商品分类');
    $("#cate_id").val(data.id);
    $("#cate_name").val(data.name);
    $("#cate_sort").val(data.sort);
    $("#cateimg").attr("src", data.show_image);
}

/**
 * 新增记录
 */
function insert()
{
    empty_data();
    popup_open();
}

/**
 * 保存数据
 */
function submit()
{
    // 表单数据
    var cate_id = $("#cate_id").val();
    var cate_name = $.trim($("#cate_name").val());
    var cate_sort = $.trim($("#cate_sort").val());
    var cateimg = $("#cateimg").attr("src");
    var cate_img = (cateimg == default_pic) ? '' : cateimg;
    // 表单验证
    if(cate_name == '') {
        msg('请输入分类名称');
    } else {
        // 表单提交
        var url = (cate_id > 0) ? "{#:url('index/updateCate')}" : "{#:url('index/insertCate')}";
        $.post(url, {cate_id:cate_id, cate_name:cate_name, cate_sort:cate_sort, cate_img:cate_img}, function(response){
            // console.log(response);return false;
            if(response.status == 1) {
                $("#search_real").val(2);
                popup_close();
                show_list(1);
            }
            msg(response.info, response.status);
        }, 'json');
    }
}
</script>
{#:/block}